<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情商城</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body,
        html {
            height: 100%;
            width: 100%;
            background: rgb(241, 243, 245);
        }

        #box {
            width: 100%;
            background-color: black;
        }

        a,
        li,
        ul {
            list-style: none;
            text-decoration: none;
        }

        #nav {
            height: 36px;
            width: 1200px;
            color: #ccc;
            margin: auto;
        }

        .nav-ul li {
            line-height: 36px;
            float: left;
            background: url(./imgs/fgx.png) no-repeat right;
            font-size: 12px;
            padding-right: 6px;
            display: block;
            margin-right: 6px;
        }

        .nav-ul li a {
            margin: 0 5px;
            color: #ccc;
            text-decoration: none;
        }

        .nav-ul li a:hover {
            color: #fff;
        }

        .left {
            float: left;
        }

        .rigth {
            float: right;
        }

        .nav-ul-rigth {
            float: right;
        }

        #classification {
            width: 100%;
            background: rgb(255, 255, 255);
        }

        .classification-huawei {
            width: 1200px;
            height: 75px;
            margin: auto;
            /* background-color: #ccc; */
        }

        .logo {
            float: left;
            margin-right: 50px;
        }

        .classification-huawei .logo a {
            width: 100px;
            height: 70px;
            display: block;
        }

        .logo a img {
            height: 100%;
            width: 100%;
        }

        .classification-li ul li {
            line-height: 75px;
            float: left;
        }

        .classification-li ul li a {
            color: black;
            margin-right: 40px;
        }

        .classification-li ul li a:hover {
            color: red;
        }

        .imgs {
            width: 100%;
            height: 550px;
            /* background-color: aqua; */
        }

        .imgs img {
            width: 100%;
            height: 100%;
        }

        .list {
            width: 1200px;
            margin: auto;
            /* background-color: #ccc; */
            overflow: hidden
        }

        .list-text {
            /* background-color: pink; */
            font-size: 30px;
            font-weight: bold;
            text-align: center;
            margin: 40px 0;
        }

        .list-img img {
            width: 100px;
            height: 100px;
        }

        .tab-shouji-1 {
            width: 230px;
            height: 390px;
            background-color: #fff;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
        }

        .tab-shouji-1 img {
            display: block;
            width: 200px;
            height: 200px;
            margin: auto;
            padding-top: 35px;
            padding-bottom: 35px;
        }

        .tab-shouji-1 span {
            font-size: 12px;
            font-weight: bold;
        }

        .tab-shouji-1 p {
            font-weight: bold;
            font-size: 14px;
            text-align: center;
        }

        .span-xin {
            color: #fff;
            background-color: red;
            border-radius: 10%;
            margin-right: 5px;
        }

        .tab-text {
            color: #888888;
            font-weight: normal !important;
            padding: 10px;
            font-size: 12px;
        }

        .tab-moy {
            color: red;
            margin-bottom: 10px;
        }

        .span-jifen {
            color: red;
            border-radius: 10%;
            border: 1px solid red;
            padding: 0 5px;
        }

        .tab-shouji-1:hover {
            box-shadow: 10px -10px 50px #888888;
        }

        #buttom {
            width: 100%;
            background-color: #fff;
        }

        .but-list {
            width: 1200px;
            height: 120px;
            margin: auto;

            border-bottom: 1px solid #ccc;
        }

        .but-list img {
            display: block;
            float: left;
            width: 25px;
            height: 25px;
            margin: auto;
            text-align: center;
            margin-right: 10px;
        }

        .but-list-l {
            width: 210px;
            height: 50px;
            float: left;
            margin-top: 50px;
            margin-left: 90px;
        }

        .but-list .but-list-l:nth-child(1) {
            margin-left: 50px;
        }

        .but-nav {
            width: 1200px;
            margin: auto;
            padding: 50px 0;
        }

        .but-nav-ul {
            float: left;
        }

        .but-nav-ul li {
            margin-top: 10px;
            cursor: pointer;
        }

        .but-nav-box {
            height: 200px;
            font-size: 12px;
            color: #888888;
        }

        .but-nav-ulLi {
            font-size: 14px;
            color: black;
            margin-bottom: 30px;
        }

        .ul-left {
            margin-left: 100px;
        }

        .but-nav-ul li:hover {
            color: red;
        }

        .but-dz {
            width: 250px;
            height: 200px;
            /* background-color: pink; */
            margin-left: 70px;
            border-left: 1px solid #ccc;
        }

        .but-dz p {
            color: black;
            font-size: 24px;
            text-align: center;
            margin-top: 20px;
        }

        .but-dz p:nth-child(2) {
            font-size: 14px;
        }

        .but-dz a {
            display: block;
            width: 200px;
            height: 40px;
            background-color: black;
            color: #fff;
            font-size: 16px;
            text-align: center;
            line-height: 40px;
            border-radius: 30px;
            margin: 19px auto;
        }

        .but-dz img {
            display: block;
            margin: auto;
        }

        #content {
            width: 100%;
            height: 650px;
            border-top: 1px solid #888888;
            border-bottom: 1px solid #888888;
            background-color: #fff;
        }

        .content {
            width: 1200px;
            height: 600px;
            margin: 30px auto;
            /* background-color: pink; */
        }

        .img {
            width: 40%;
            height: 100%;
            /* background-color: aqua; */
        }

        .imgId {
            width: 100%;
            height: 85%;
            /* background-color: black; */
        }

        .left {
            float: left;
        }

        .imgsId {
            height: 15%;
            width: 100%;
            margin: 0;
        }

        .imgsId img {
            float: left;
            width: 80px;
            height: 80px;
            margin-right: 16px;
            display: block;
            border: 1px solid #ccc;
        }

        .imgsId .maNo {
            margin: 0;
        }

        .text {
            width: 60%;
            height: 100%;
            /* background-color: antiquewhite; */
            box-sizing: border-box;
            padding-left: 20px;
            padding-top: 20px;
        }

        .right {
            float: right;
        }

        .text-name {
            font-size: 21px;
            overflow: hidden;
            margin-bottom: 10px;
        }

        .moy {
            box-sizing: border-box;
            width: 100%;
            height: 90px;
            background: #f5f5f5;
            padding-top: 14px;
            padding-left: 5px;
        }

        .moy-p {
            color: #ca141d;
            font-size: 24px;
        }

        label {
            padding: 10px;
            padding-right: 30px;
            font-size: 12px;
        }

        .moy-cx {
            font-size: 12px;
        }

        .moy-span {
            color: #ca141d;
            margin-right: 10px;
            border: 1px solid #ca141d;
        }

        .h6r {
            border-top: 1px solid #888888;
            width: 100%;
            height: 30px;
            margin-top: 10px;
        }

        .dz {
            width: 100%;
            height: 50px;
            /* background: aqua; */
            padding-left: 15px;
        }

        .dz span {
            display: block;
            font-size: 12px;
            width: 70px;
            margin-top: 5px;
        }

        select {
            border: 1px solid #c4c4c4;
        }

        .dz p {
            font-size: 12px;
            margin-top: 10px;
            margin-left: 70px;
        }

        .bianma-id {
            width: 100%;
            height: 50px;
            /* background: aqua; */
            padding-left: 15px;
            overflow: hidden;
            border-bottom: 1px solid #888888;
        }

        .bianma-id span {
            display: block;
            font-size: 12px;
            width: 70px;
            margin-top: 15px;
        }

        .bianma-id p {
            font-size: 12px;
            margin-top: 15px;
            margin-left: 70px;
        }

        i {
            font-style: normal;
            display: block;
            float: left;
            margin-left: 10px;
            padding: 8px 20px;
            border: 1px solid #888888;
            font-size: 12px;
        }

        .guige {
            width: 100%;
            height: 200px;
            /* background: aqua; */
            padding-left: 15px;
            overflow: hidden;
            border-bottom: 1px solid #888888;
            /* padding-top: 10px; */
        }

        .guige span {
            display: block;
            font-size: 12px;
            width: 70px;
            margin-top: 10px;
            float: 15px;
        }

        .settlement {
            width: 100%;
            height: 90px;
            padding-left: 15px;
            overflow: hidden;
            /* background-color: aqua; */
        }

        .settlement p {
            font-size: 12px;
            margin-top: 15px;
        }

        .settlement-span {
            margin-left: 20px;
            color: red;
        }

        .settlement input {
            width: 50px;
            height: 50px;
            border: #888888 1px solid;
            text-align: center;
            font-size: 24px;
            background-color: #fff;
        }

        .settlement button {
            width: 24px;
            height: 25px;
            font-size: 16px;
            border: #888888 1px solid;
            text-align: center;
            background-color: #fff;
            position: absolute;
            border-left: none;
        }

        .pos {
            position: relative;
            margin-top: 5px;
            float: left;
        }

        .settlement .jian {
            top: 25px;
            cursor: not-allowed;
            background-color: #c4c4c4;
        }

        .settlement a {
            display: block;
            /* list-style: none; */
            width: 200px;
            height: 50px;
            margin-left: 40px;
            margin-top: 5px;
            float: left;
            text-align: center;
            line-height: 50px;
            background-color: #fc600c;
            color: #fff;
            /* font-weight: bold; */
            font-size: 20px;
        }

        .settlement .settlement-a2 {
            background-color: #ca141d;
        }
    </style>
</head>

<body>
    <div id="box">
        <!-- top -->
        <div id="nav">
            <ul class="nav-ul left">
                <li><a href="index.html">首页</a></li>
                <li><a href="">华为官网</a></li>
                <li><a href="">花粉俱乐部</a></li>
                <li><a href="">V码(优购码)</a></li>
                <li><a href="">企业购</a></li>
                <li><a href="">Select Region</a></li>
                <li style="background: url()"><a href="">更多精彩</a></li>
            </ul>
            <ul class="nav-ul right" style="float: right">
                <li><a href="" class="mobile">请登录</a>&nbsp;<a href="" class="mobile1">注册</a></li>
                <li><a href="">我的订单</a></li>
                <li><a href="">客服</a></li>
                <li><a href="">网站导航</a></li>
                <li><a href="">手机版</a></li>
                <li style="background: url(); background-color: rgb(66, 66, 66)">
                    <a href="./cart.html">购物车</a>
                </li>
            </ul>
        </div>
    </div>
    <div id="classification">
        <div class="classification-huawei">
            <div class="logo">
                <a href="">
                    <img src="./imgs/logo.png" alt="" />
                </a>
            </div>
            <div class="classification-li">
                <ul>
                    <li><a href="">华为专区</a></li>
                    <li><a href="">鸿蒙智联</a></li>
                    <li><a href="">莫塞尔</a></li>
                    <li><a href="">华为智选</a></li>
                    <li><a href="">Harmony OS</a></li>
                    <li><a href="">教育优惠</a></li>
                    <li><a href="">特惠企采</a></li>
                </ul>
            </div>
        </div>
    </div>
    <!--主体-->

    <div id="content">
        <div class="content">
            <div class="img left">
                <img class="imgId"
                    src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1627353447.30892610.png" alt="">
                <div class="imgsId">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1627353447.30892610.png" alt="">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1627353447.30892610.png" alt="">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1627353447.30892610.png" alt="">
                    <img src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1627353447.30892610.png" alt="">
                    <img class="maNo"
                        src="https://cdn.cnbj0.fds.api.mi-img.com/b2c-shopapi-pms/pms_1627353447.30892610.png" alt="">
                </div>
            </div>

            <div class="text left">
                <p class="text-name">Redmi K40 游戏增强版</p>
                <div class="moy">
                    <label class="left">价&nbsp&nbsp&nbsp&nbsp格</label>
                    <p class="moy-p">￥4488</p><br>
                    <label class="left" style="padding:0 10px;padding-right: 30px;">促&nbsp&nbsp&nbsp&nbsp销</label>
                    <p class="moy-cx"><span class="moy-span">赠送积分</span>购买即赠商城积分，积分可抵现~</p>
                </div>
                <div class="h6r"></div>

                <div class="dz">
                    <span class="left">服务说明</span>
                    <select id="province">
                        <option>选择省份</option>
                    </select>

                    <select id="city">
                        <option>选择市区</option>
                    </select>
                    <select id="xian">
                        <option>选择县</option>
                    </select>
                    <br>
                    <p>√已满48元包邮 &nbsp; √由华为终端提供商品、发货开票及售后服务</p>
                </div>
                <br>
                <div class="bianma-id">
                    <span class="left">商品编码</span>
                    <p class="bianma-p">2601010322505</p>
                </div>
                <div class="guige">
                    <div class="color">
                        <br>
                        <span class="left">选择颜色</span>
                        <i style="border:1px solid  #ca141d;">曜金黑</i>
                        <i>星河蓝</i>
                        <i>可可茶金</i>
                        <i>雪域白</i>
                    </div>
                    <br>
                    <div class="banben">
                        <br>
                        <span class="left">选择版本</span>
                        <i style="border:1px solid  #ca141d;">4G全网通 8GB+128GB</i>
                        <i>4G全网通 8GB+256GB</i>
                    </div>
                    <br>
                    <div class="taocan">
                        <br>
                        <span class="left">选择套餐</span>
                        <i style="border:1px solid  #ca141d;">官方标配（无充电套装及耳机）</i>
                    </div>
                    <br>
                    <div class="baozhang">
                        <br>
                        <span class="left">保障服务</span>
                        <i style="border:1px solid  #ca141d;">华为无忧服务 ￥799</i>
                        <i> ￥799碎屏服务宝1年</i>
                        <i> ￥399延长服务宝1年 ￥268</i>
                    </div>
                </div>
                <div class="settlement">
                    <p>已选择商品:<span class="settlement-span">曜金黑/4G全网通 8GB+128GB/官方标配（无充电套装及耳机）/华为无忧服务 ￥799/</span></p>
                    <div class="pos">
                        <input type="text" value="1">
                        <button class="jia">+</button>
                        <button class="jian">-</button>
                    </div>
                    <a href="" class="settlement-a1">加入购物车</a>
                    <a href="" class="settlement-a2">立即下单</a>
                </div>
            </div>
        </div>
    </div>


    <!--主体-->
    </div>

    <div id="buttom">
        <div class="but-list">
            <div class="but-list-l">
                <img src="./imgs/but1 (1).png" alt="" />
                百强企业 品质保证
            </div>
            <div class="but-list-l">
                <img src="./imgs/but2.png" alt="" />
                七天退货 15天换货
            </div>
            <div class="but-list-l">
                <img src="./imgs/but4.png" alt="" />
                48元起免运费
            </div>
            <div class="but-list-l">
                <img src="./imgs/but3.png" alt="" />
                2000家服装店 全国联保
            </div>
        </div>
        <div class="but-nav">
            <div class="but-nav-box">
                <ul class="but-nav-ul">
                    <li class="but-nav-ulLi">购物指南</li>
                    <li>免息分期</li>
                    <li>以旧换新</li>
                    <li>众测活动</li>
                    <li>企业购</li>
                    <li>O2O采购</li>
                </ul>
                <ul class="but-nav-ul ul-left">
                    <li class="but-nav-ulLi">售后服务</li>
                    <li>免息分期</li>
                    <li>以旧换新</li>
                    <li>众测活动</li>
                    <li>企业购</li>
                    <li>O2O采购</li>
                </ul>
                <ul class="but-nav-ul ul-left">
                    <li class="but-nav-ulLi">维修与技术支持</li>
                    <li>免息分期</li>
                    <li>以旧换新</li>
                    <li>众测活动</li>
                    <li>企业购</li>
                    <li>O2O采购</li>
                </ul>
                <ul class="but-nav-ul ul-left">
                    <li class="but-nav-ulLi">特色服务</li>
                    <li>免息分期</li>
                    <li>以旧换新</li>
                    <li>众测活动</li>
                    <li>企业购</li>
                    <li>O2O采购</li>
                </ul>
                <ul class="but-nav-ul ul-left">
                    <li class="but-nav-ulLi">关于我们</li>
                    <li>免息分期</li>
                    <li>以旧换新</li>
                    <li>众测活动</li>
                    <li>企业购</li>
                    <li>O2O采购</li>
                </ul>
                <ul class="but-nav-ul ul-left">
                    <li class="but-nav-ulLi">友情链接</li>
                    <li>免息分期</li>
                    <li>以旧换新</li>
                    <li>众测活动</li>
                    <li>企业购</li>
                    <li>O2O采购</li>
                </ul>
                <div class="but-dz left">
                    <p>950805</p>
                    <p>7 x 24 小时客服热线(仅收市话费)</p>
                    <a href="">在线客服</a>
                    <img src="./imgs/buts.png" alt="" />
                </div>
            </div>
        </div>
    </div>
</body>

</html>
<script>
    function getUrlParam(key) {
        // ?id=2&type=1
        let result = '';
        location.search.substr(1).split('&').forEach(item => {
            let keyValue = item.split('=');
            if (keyValue[0] == key) {
                result = keyValue[1];
            }
        })
        return result;
    }
</script>
<script>
    if(!localStorage.getItem("huaweiID")){
        alert("请先登录")
        location.href="login.html"
    }
    let mobile = document.querySelector(".mobile")
    let mobile1 = document.querySelector(".mobile1")
    if (localStorage.getItem("huaweiName")) {
        mobile.innerHTML = localStorage.getItem("huaweiName")
        mobile1.innerHTML = "退出账号"
    }
    mobile.onclick = function () {
        console.log(mobile1.innerHTML)
        if (mobile.innerHTML == "请登录") {
            localStorage.setItem('urlS', location.href);
            location.href = "login.html"
            return false
        } else {
            alert("账号名称")
            return false
        }
    }
    mobile1.onclick = function () {
        console.log(mobile1.innerHTML)
        if (mobile1.innerHTML == "退出账号") {
            localStorage.removeItem("huaweiName")
            localStorage.removeItem("huaweiID")
            location.reload()
            return false
        } else {
            location.href = "register.html"
            return false
        }
    }
    //跳转
    function listSrc(a) {
        console.log(a.getAttribute("value"));

        // location.href = `detail.html?goodsId=${a.getAttribute("value")}`;
    }
    var city = document.getElementById("city");
    let xian = document.getElementById("xian");
    var a = "http://phpclub.org.cn:8080/api/system/province?parentId=1"
    let xhri = new XMLHttpRequest();
    xhri.open("get", "http://phpclub.org.cn:8080/api/system/province?parentId=1");
    xhri.send()
    xhri.onreadystatechange = function () {
        if (xhri.readyState == 4 && xhri.status == 200) {
            let res = JSON.parse(xhri.responseText);
            // console.log(res)
            document.querySelector("#province").innerHTML = ""
            for (let key in res.data) {
                document.querySelector("#province").innerHTML +=
                    "<option value=" + res.data[key].id + ">" + res.data[key].name + "</option>";
            }

            document.querySelector("#province").onchange = function () {
                xhri.open("get", "http://phpclub.org.cn:8080/api/system/province?parentId=" + this.value);
                xhri.send()
                city.innerHTML = `<option>选择县</option>`;
                xian.innerHTML = `<option>选择市</option>`;
                xhri.onreadystatechange = function () {
                    if (xhri.readyState == 4 && xhri.status == 200) {
                        let resc = JSON.parse(xhri.responseText);
                        // console.log(resc)
                        city.innerHTML = ""
                        if (resc.data.length <= 2) {
                            city.innerHTML = `<option value=${resc.data[0].id} >${resc.data[0].name}</option>`;
                            xian.innerHTML = `<option value=${resc.data[1].id}>${resc.data[1].name}</option>`;
                            xhri.open("get", "http://phpclub.org.cn:8080/api/system/province?parentId=" + resc.data[0].id);
                            xhri.send()
                            xhri.onreadystatechange = function () {
                                if (xhri.readyState == 4 && xhri.status == 200) {
                                    let resbj = JSON.parse(xhri.responseText);
                                    // console.log(resbj)
                                    xian.innerHTML = ""
                                    for (let key in resbj.data) {
                                        xian.innerHTML +=
                                            `<option value=${resbj.data[key].id} >${resbj.data[key].name}</option>`;
                                    }

                                }
                            }
                        } else {
                            for (let key in resc.data) {
                                city.innerHTML +=
                                    `<option value=${resc.data[key].id} >${resc.data[key].name}</option>`;
                                // console.log(resc.data[key].id)
                                // console.log(resc.data[key].id)

                                city.onchange = function () {
                                    // console.log(this.value)
                                    xhri.open("get", "http://phpclub.org.cn:8080/api/system/province?parentId=" + this.value);
                                    xhri.send()
                                    xhri.onreadystatechange = function () {
                                        if (xhri.readyState == 4 && xhri.status == 200) {
                                            let resx = JSON.parse(xhri.responseText);
                                            // console.log(resx)
                                            xian.innerHTML = ""
                                            for (let key in resx.data) {
                                                xian.innerHTML +=
                                                    `<option value=${resx.data[key].id} >${resx.data[key].name}</option>`;
                                            }

                                        }
                                    }

                                };

                            }

                        }

                    }
                }
                // console.log(this.value)
            };
        }
    }

    const uid = getUrlParam("goodsId")
    console.log(uid)
    let imgs = document.querySelector(".img")
    var a = "http://phpclub.org.cn:8080/api/goods/detail?goodsId=14"
    let xhr = new XMLHttpRequest();
    xhr.open("get", "http://phpclub.org.cn:8080/api/goods/detail?goodsId=" + uid);
    xhr.send("");
    console.log("http://phpclub.org.cn:8080/api/goods/lists" + uid)
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let text = JSON.parse(xhr.responseText);
            console.log(text)
            goodsImgs = [{
                goodsImg: "./imgs/tab-shouji1.png"
            },
            { goodsImg: "./imgs/tab-shouji2.png" },
            { goodsImg: "./imgs/tab-shouji3.png" },
            { goodsImg: "./imgs/tab-shouji4.png" },
            { goodsImg: "./imgs/tab-shouji5.png" }
            ]
            console.log(goodsImgs)
            console.log(text.data.goodsImg.length)
            if (text.data.goodsImg.length == 0) {
                imgs.innerHTML = ` <img class="imgId" src="${goodsImgs[0].goodsImg}" alt=""><div class="imgsId"></div>`
                for (let i = 0; i < goodsImgs.length; i++) {
                    document.querySelector(".imgsId").innerHTML += ` 
                    <img  class="left imgTo" src="${goodsImgs[i].goodsImg}" alt="">
            `
                }
                let imgTo = document.querySelectorAll(".imgTo")
                for (let i = 0; i < imgTo.length; i++) {
                    imgTo[i].onclick = function () {
                        document.querySelector(".imgId").src = `${goodsImgs[i].goodsImg}`
                        for (let j = 0; j < imgTo.length; j++) {
                            imgTo[j].style.border = " 1px solid #ccc"
                        }
                        this.style.border = " 1px solid  #ca141d"
                    }
                }
            } else {
                imgs.innerHTML = ` <img class="imgId" src="${text.data.goodsImg[0].goodsImg}" alt=""><div class="imgsId"></div>`
                for (let i = 0; i < text.data.goodsImg.length; i++) {
                    document.querySelector(".imgsId").innerHTML += ` 
                    <img  class="left imgTo" src="${text.data.goodsImg[i].goodsImg}" alt="">
            `
                }
                let imgTo = document.querySelectorAll(".imgTo")
                for (let i = 0; i < imgTo.length; i++) {
                    imgTo[i].onclick = function () {
                        document.querySelector(".imgId").src = `${text.data.goodsImg[i].goodsImg}`
                        for (let j = 0; j < imgTo.length; j++) {
                            imgTo[j].style.border = " 1px solid #ccc"
                        }
                        this.style.border = " 1px solid  #ca141d"
                    }
                }
            }


            document.querySelector(".moy-p").innerText = "￥" + text.data.marketPrice
            document.querySelector(".bianma-p").innerText = text.data.goodsSn
            document.querySelector(".text-name").innerText = text.data.goodsName


        }
    }
    var ass = ["曜金黑", "4G全网通 8GB+128GB", "官方标配（无充电套装及耳机）", "华为无忧服务 ￥799"]
    let colors = document.querySelectorAll(".color>i")

    for (let i = 0; i < colors.length; i++) {
        colors[i].onclick = function () {
            for (let j = 0; j < colors.length; j++) {
                colors[j].style.border = " 1px solid  #888"
            }
            this.style.border = " 1px solid  #ca141d"
            //   console.log(this.innerText) 
            ass[0] = this.innerText
            bz()
        }
    }
    let banben = document.querySelectorAll(".banben>i")
    for (let i = 0; i < banben.length; i++) {
        banben[i].onclick = function () {
            for (let j = 0; j < banben.length; j++) {
                banben[j].style.border = " 1px solid  #888"
            }
            this.style.border = " 1px solid  #ca141d"
            ass[1] = this.innerText
            bz()
        }
    }
    let taocan = document.querySelectorAll(".taocan>i")
    for (let i = 0; i < taocan.length; i++) {
        taocan[i].onclick = function () {
            for (let j = 0; j < taocan.length; j++) {
                taocan[j].style.border = " 1px solid  #888"
            }
            this.style.border = " 1px solid  #ca141d"
            ass[2] = this.innerText
            bz()
        }
    }
    let baozhang = document.querySelectorAll(".baozhang>i")
    for (let i = 0; i < baozhang.length; i++) {
        baozhang[i].onclick = function () {
            for (let j = 0; j < baozhang.length; j++) {
                baozhang[j].style.border = " 1px solid  #888"
            }
            this.style.border = " 1px solid  #ca141d"
            ass[3] = this.innerText
            bz()
        }
    }
    let spans = document.querySelector(".settlement-span")
    function bz() {
        spans.innerHTML = ""
        for (let i = 0; i < ass.length; i++) {
            // console.log(ass[i])
            spans.innerHTML += (ass[i] == undefined ? "" : ass[i] + "/")
        }
    }

    let pos = document.querySelector(".pos>input")
    let jia = document.querySelectorAll(".pos>button")[0]
    let jian = document.querySelectorAll(".pos>button")[1]
    jia.onclick = function () {
        pos.value++
        if (pos.value <= 1) {
            jian.style.cursor = "not-allowed"
            jian.style.backgroundColor = "#c4c4c4";
        } else {
            jian.style.cursor = "pointer"
            jian.style.backgroundColor = "#fff";
        }
    }
    jian.onclick = function () {
        pos.value == 1 ? "" : pos.value--
        if (pos.value <= 1) {
            jian.style.cursor = "not-allowed"
            jian.style.backgroundColor = "#c4c4c4";
        } else {
            jian.style.cursor = "pointer"
            jian.style.backgroundColor = "#fff";
        }

    }
    function aaa() {
        alert(`这是您所选的商品规格：
       ${spans.innerHTML}
       数量：${pos.value}
       `)
        let xhrx = new XMLHttpRequest();
        xhrx.open("post", "http://phpclub.org.cn:8080/api//cart/add");
        xhrx.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
        );
        xhrx.send(`userId=${localStorage.getItem("huaweiID")}&goodsId=${uid}&goodsCount=${pos.value}`);
        console.log(`userId=${localStorage.getItem("huaweiID")}&goodsId=${uid}&goodsCount=${pos.value}`)
        xhrx.onreadystatechange = function () {
            if (xhrx.readyState == 4 && xhrx.status == 200) {
                console.log(JSON.parse(xhrx.responseText))
            }
        }
        
    }
    let arrls
    document.querySelector(".settlement-a2").onclick = function (e) {
        aaa()
        location.href = "cart.html"
        e.preventDefault()

    }
    document.querySelector(".settlement-a1").onclick = function (e) {
        aaa()
        alert("加入成功")
        e.preventDefault()
    }
</script>